<template>
  <el-scrollbar class="scrollbar" :native="false">
    <div class="shop-tree">
      <div class="tree">
        <el-tree ref="tree" :props="props" :load="loadNode" lazy node-key="id">
          <div slot-scope="{ node, data }">
            <div class="tree-custom">
              <el-checkbox
                style="margin-right: 8px"
                v-if="data.eqptId"
                v-model="node.checked"
                @change="handleCheckChange($event, data)"
                >{{ node.label }}</el-checkbox
              >
              <span v-else>{{ node.label }}</span>
            </div>
          </div>
        </el-tree>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
import { getListByTag } from '../js/floor'
import { getAppEqptTypeList, getEquipmentList } from '../js/device'
export default {
  name: 'TypeTree',
  data () {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      checkIds: []
    }
  },
  props: {
    // planEqptIds: {
    //   type: Array,
    //   required: false,
    //   default: () => []
    // }
  },
  watch: {
    // planEqptIds(val) {
    //   this.$refs.tree.setCheckedKeys(val)
    //   this.getEquipmentList('eqpt_Id', 'in', val.join(',')).then(res => {
    //     this.checkIds = res.map(e => {
    //       return {
    //         eqptId: e.eqptId,
    //         eqptHls: e.eqptHls
    //       }
    //     })
    //     this.$emit('deviceClick', this.checkIds)
    //   })
    // }
  },
  methods: {
    // 勾选改变
    handleCheckChange (val, data) {
      if (val) {
        this.$refs.tree.setCheckedKeys([data.eqptId])
        this.$emit('deviceClick', data)
      }
    },

    // 懒加载函数
    loadNode (node, resolve) {
      if (node.level === 0) {
        this.getAppEqptTypeList().then(res => {
          return resolve([...res])
        })
      } else {
        this.getEquipmentList(node.key).then(eqptRes => {
          return resolve([...eqptRes])
        })
      }

      // let id = node.level === 0 ? 0 : node.key
      // this.getAppEqptTypeList(id, node.level + 1).then(res => {
      //   this.getEquipmentList('floorId', 'eq', id).then(eqptRes => {
      //     return resolve([...eqptRes, ...res])
      //   })
      // })
    },

    // 获取设备信息
    async getEquipmentList (eqptTypeId) {
      const params = {
        current: 1,
        pageSize: 1000,
        eqptTypeId: eqptTypeId,
        tenantNo: JSON.parse(localStorage.getItem('Visual__User__Info')).tenantNo
        // tenantNo: localStorage.getItem('tenantNo')
      }
      const { data } = await getEquipmentList(params)
      if (data.records.length) {
        data.records.forEach(e => {
          const { eqptName, eqptId } = e
          e.name = eqptName
          e.id = eqptId
          e.leaf = true
        })
      }
      return data.records
      // this.deviceList = data.records
    },
    // async getEquipmentList(column, type, id) {
    //   const params = {
    //     conditions: [
    //       {
    //         column,
    //         type,
    //         value: id
    //       }
    //     ],
    //     current: 1,
    //     pageSize: 1000,
    //     eqptTypeId: 'sb1'
    //   }
    //   const { data } = await getEquipmentList(params)
    //   if (data.records.length) {
    //     data.records.forEach(e => {
    //       const { eqptName, eqptId } = e
    //       e.name = eqptName
    //       e.id = eqptId
    //       e.leaf = true
    //     })
    //   }
    //   return data.records
    // },

    // 获取楼层信息
    async getListByTag (parentId, tag) {
      const params = {
        parentId,
        tag
      }
      const { data } = await getListByTag(params)
      return data
    },
    // 获取楼层信息
    async getAppEqptTypeList () {
      const { data } = await getAppEqptTypeList()
      let formatData = data.map(e => {
        return {
          name: e.eqptType,
          id: e.eqptTypeId
        }
      })
      if (formatData.length) {
        this.$emit('init', formatData[0])
      }
      return formatData
    }
  }
}
</script>
<style lang="scss" scoped>
.scrollbar {
  height: 100%;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
